<!-- 基本信息-->
<template>
  <div>
    <el-form :model="typeForm" ref="typeForm" label-width="180px" label-position="left">
      <el-form-item label="分类：" prop="sort" :rules="rules.sort">
        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.sort" placeholder="分类">
          <el-option label="公司" :value="0"></el-option>
          <el-option label="个人" :value="1"></el-option>
        </el-select>
        <span v-else>{{typeForm.sort == 0? "公司":"个人"}}</span>
      </el-form-item>
      <el-form-item label="公司名称/姓名：" prop="companyName" :rules="rules.companyName">
        <el-input
          v-if="typeStatus !='view'"
          v-model.trim="typeForm.companyName"
          @change="(val)=>typeForm.bankName = val"
          autocomplete="off"
        ></el-input>
        <span v-else>{{typeForm.companyName}}</span>
      </el-form-item>
      <el-form-item label="纳税人识别号/身份证号：" prop="companyTaxpayer" :rules="rules.companyTaxpayer">
        <el-input
          v-if="typeStatus !='view'"
          v-model.trim="typeForm.companyTaxpayer"
          autocomplete="off"
        ></el-input>
        <span v-else>{{typeForm.companyTaxpayer}}</span>
      </el-form-item>
      <el-form-item
        label="法定代表人："
        prop="companyRepresentative"
        :rules="rules.companyRepresentative"
      >
        <el-input
          v-if="typeStatus !='view'"
          v-model.trim="typeForm.companyRepresentative"
          autocomplete="off"
        ></el-input>
        <span v-else>{{typeForm.companyRepresentative}}</span>
      </el-form-item>
      <el-form-item label="公司地址：">
        <div class="flex-box" v-if="typeStatus !='view'">
          <el-form-item prop="companyProvince" :rules="rules.companyProvince">
            <el-select
              filterable
              v-model.trim="typeForm.companyProvince"
              placeholder="省"
              @change="loadCity(typeForm.companyProvince,'cityOptions')"
            >
              <el-option
                v-for="(item,index) in provinceOptions"
                :key="index"
                :label="item.province"
                :value="item.province"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="companyCity" :rules="rules.companyCity">
            <el-select
              filterable
              v-model.trim="typeForm.companyCity"
              placeholder="市"
              @change="loadArea(typeForm.companyCity,'cityOptions')"
            >
              <el-option
                v-for="(item,index) in cityOptions"
                :key="index"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="companyCounty" :rules="rules.companyCounty">
            <el-select v-model.trim="typeForm.companyCounty" filterable placeholder="区/县">
              <el-option
                v-for="(item,index) in areaOptions"
                :key="index"
                :label="item.area"
                :value="item.area"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:100%" prop="companyAddress" :rules="rules.companyAddress">
            <el-input v-model.trim="typeForm.companyAddress" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <span
          v-else
        >{{(typeForm.companyProvince || '') +(typeForm.companyCity|| '')+(typeForm.companyCounty||'')+(typeForm.companyAddress||'')}}</span>
      </el-form-item>
      <el-form-item label="联系电话：" prop="companyPhone" :rules="rules.companyPhone">
        <el-input
          v-if="typeStatus !='view'"
          v-model.trim="typeForm.companyPhone"
          autocomplete="off"
          placeholder="例如“010-88888888”或者“13000000000”"
        ></el-input>
        <span v-else>{{typeForm.companyPhone}}</span>
      </el-form-item>
      <el-form-item label="用途：" prop="apply">
        <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.apply" autocomplete="off"></el-input>
        <span v-else>{{typeForm.apply|| ''}}</span>
      </el-form-item>
      <el-form-item label="邮政编码：" prop="companyPostalcode" :rules="rules.companyPostalcode">
        <el-input
          v-if="typeStatus !='view'"
          v-model.trim="typeForm.companyPostalcode"
          autocomplete="off"
        ></el-input>
        <span v-else>{{typeForm.companyPostalcode|| ''}}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  components: {},
  props: ["typeForm", "typeStatus", "necessary"],
  data() {
    return {
      rules: {
        sort: [{ required: true, message: "请输入分类", trigger: "change" }],
        companyName: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value) {
                let isCom = !this.typeForm.sort;
                return callback(
                  new Error(isCom ? "请输入公司名称" : "请输入姓名")
                );
              }
              if (value && value.length > 30) {
                return callback(new Error("公司名称/姓名长度不能大于30"));
              }
              callback();
            }
          }
        ],
        companyTaxpayer: [
          {
            required: false,
            trigger: ["blur"],
            validator: async (rule, value, callback) => {
              const comReg = /^[0-9A-Z]{15,}$/;

              let isCom = !this.typeForm.sort;
              if (!value && this.necessary)
                return callback(
                  new Error(isCom ? "请输入纳税人识别号" : "请输入身份证号")
                );
              if (!value) callback();
              if (isCom) {
                if (
                  (value.length != 15 &&
                    value.length != 17 &&
                    value.length != 18 &&
                    value.length != 20) ||
                  !comReg.test(value)
                )
                  return callback(new Error("请输入正确格式的纳税人识别号"));
              } else {
                let flag = await utils.validateIdCard(value);
                if (!flag)
                  return callback(new Error("请输入正确格式的身份证号"));
              }
              callback();
            }
          }
        ],
        companyPhone: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              const reg = /^0\d{2,3}-?\d{7,8}$|^1\d{10}$/;
              if (value && !reg.test(value)) {
                callback(new Error("请输入正确的联系电话"));
              } else {
                callback();
              }
            }
          }
        ],
        companyRepresentative: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value && this.typeForm.sort == 0 && this.necessary)
                return callback(new Error("请输入法定代表人"));
              if (value && value.length > 20)
                return callback(new Error("法定代表人长度不能大于20"));
              callback();
            }
          }
        ],
        companyPostalcode: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              const reg = /^\d{6}$/;
              if (!value) return callback();
              if (!reg.test(value)) {
                callback(new Error("请输入正确格式的邮政编码"));
              } else {
                callback();
              }
            }
          }
        ],
        companyProvince: [
          {
            required: false,
            trigger: "change",
            validator: (rule, value, callback) => {
              if (!value && this.typeForm.sort == 0) {
                return callback(new Error("请选择省份"));
              }
              callback();
            }
          }
        ],
        companyCity: [
          {
            required: false,
            trigger: "change",
            validator: (rule, value, callback) => {
              if (!value && this.typeForm.sort == 0) {
                return callback(new Error("请选择城市"));
              }
              callback();
            }
          }
        ],
        companyCounty: [
          {
            required: false,
            trigger: "change",
            validator: (rule, value, callback) => {
              if (!value && this.typeForm.sort == 0) {
                return callback(new Error("请选择区县"));
              }
              callback();
            }
          }
        ],
        companyAddress: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value && this.typeForm.sort == 0) {
                return callback(new Error("请输入详细地址"));
              }
              if (value && value.length > 50) {
                return callback(new Error("长度不得超过50个字符"));
              }
              callback();
            }
          }
        ]
      },
      provinceOptions: [], //省份
      cityOptions: [], //城市
      areaOptions: [] //区
    };
  },
  methods: {
    //获取省
    loadprovinces() {
      this.axios.get(api.GETPROVINCES).then(res => {
        if (res.data.code == 200) {
          this.provinceOptions = res.data.data;
        }
      });
    },
    //获取市
    loadCity(province, options) {
      let thisObj = this.provinceOptions.find(item => {
        return province === item.province;
      });
      if (options == "cityOptions") {
        this.$set(this.typeForm, "companyCity", null);
        this.$set(this.typeForm, "companyCounty", null);
      } else {
        this.$set(this.typeForm, "openingBankCity", null);
      }
      this.axios.get(`${api.GETCITY}/${thisObj.provinceid}`).then(res => {
        if (res.data.code == 200) {
          this[options] = res.data.data.cityList;
        }
      });
    },
    //获取区
    loadArea(city, options) {
      let thisObj = this.cityOptions.find(item => {
        return city === item.city;
      });
      if (options == "cityOptions") {
        this.typeForm.companyCityCode = thisObj.cityId;
        this.$set(this.typeForm, "companyCounty", null);
      }
      this.axios.get(`${api.GETAREA}/${thisObj.cityId}`).then(res => {
        if (res.data.code == 200) {
          this.areaOptions = res.data.data.cityArealist;
        }
      });
    },
    veri() {
      let _this = this;
      return new Promise((resolve, reject) => {
        _this.$refs.typeForm.validate(valid => {
          resolve(valid);
        });
      });
    }
  },
  created() {
    this.loadprovinces();
  },
  destroyed() {},
  filters: {}
};
</script>
<style lang="stylus" scoped>
.flex-box {
  display: flex;
}

.flex-box>* {
  margin-right: 10px;
}

.flex-box>*:last-child {
  margin-right: 0;
}</style>
<style lang="stylus">
.posterurl .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>

